<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="问题描述" name="des">
                <div class="detail">
                    <img class="image" src="../../../../../../assets/最小生成树/最小生成树2.png">
                    <div class="detail-text">
                        <div class="text">
                            一个有 n 个结点的连通图的生成树是原图的极小连通子图，且包含原图中的所有 n 个结点，
                            并且有保持图连通的最少的边或者具有最小的权值。
                        </div>
                        <el-table :data="tableData" border style="width: 99%;">
                            <el-table-column prop="name" label="名称" align="center"/>
                            <el-table-column prop="time" label="时间复杂度" align="center"/>
                        </el-table>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="相关研究" name="3">
                <ul>
                    <li v-for="item in thesisData" :key="item.title">
                        <a :href="item.link" target="_blank">
                            <div class="thesis">
                                <img class="thesis-cover" src="../../../../../../icons//thesis.svg" alt="">
                                <div class="thesis-title">
                                    {{ item.title }}
                                </div>
                                <div class="thesis-author">
                                    <span>作者：</span>{{ item.author }}
                                </div>
                                <div class="thesis-time">
                                    <span>时间：</span>{{ item.time }}
                                </div>
                                <div class="thesis-source">
                                    <span>来源：</span>{{ item.source }}
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="应用场景" name="4">
                <div class="detail">
                    <img class="use" src="../../../../../../assets/最小生成树/最小生成树.png" alt="">
                    <div class="text">
                        最小生成树在现实生活和计算机科学中有广泛的实际运用场景。以下是一些常见的应用场景：<br>

                        &nbsp;&nbsp;1.网络设计与通信：在通信网络、电信和计算机网络的设计中，最小生成树用于确定连接所有节点的最优路径，以确保数据传输的高效性和稳定性。<br>

                        &nbsp;&nbsp;2.电力传输：在电力系统中，最小生成树可用于确定电力线路的布置，确保所有地区都能得到电力供应，同时最小化电力线路的长度和损耗。<br>

                        &nbsp;&nbsp;3.交通规划：在城市交通规划中，最小生成树可以用来规划公交线路或道路网络，以实现最短路径和最小交通拥堵。<br>

                        &nbsp;&nbsp;4.管道布置：在石油、天然气等管道网络的布置中，最小生成树可用于确定最优的管道布置，以最小化材料和成本的使用。<br>

                        &nbsp;&nbsp;5.无线传感器网络：在无线传感器网络中，传感器节点需要有效地传输数据到基站，通过最小生成树可以构建出最优的通信路径，延长网络寿命。<br>

                        &nbsp;&nbsp;6.图像分割：在计算机视觉领域，图像分割问题可以转化为最小生成树问题，用于将图像分成连通的区域，有助于图像处理和分析。<br>

                        &nbsp;&nbsp;7.电路板设计：在电路板布线时，最小生成树可用于确定元件之间的最优连接方式，以最小化电路的面积和布线的复杂性。<br>

                        &nbsp;&nbsp;8.聚类分析：在数据挖掘和机器学习中，最小生成树可以用于聚类分析，将相似的数据点连接在一起形成簇。
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

// 相关研究部分
const thesisData = [
    {
        title: "最小生成树之Kruskal算法",
        author: "Enstein_Jun",
        time: "2015年",
        source: "CSDN",
        link: "https://blog.csdn.net/luomingjun12315/article/details/47700237",
    },
    {
        title: "最小生成树-Kruskal算法",
        author: "独钓烟云",
        time: "2021年",
        source: "CSDN",
        link: "https://blog.csdn.net/qq_49786613/article/details/115309103?ops_request_misc=&request_id=&biz_id=102&utm_term=%E6%9C%80%E5%B0%8F%E7%94%9F%E6%88%90%E6%A0%91kruskal%E7%AE%97%E6%B3%95&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-7-115309103.142^v99^control&spm=1018.2226.3001.4187",
    },
    {
        title: "并查集——最小生成树算法Kruskal",
        author: "bugcoder-9905",
        time: "2022年",
        source: "CSDN",
        link: "https://blog.csdn.net/qq_42500831/article/details/125609243?ops_request_misc=&request_id=&biz_id=102&utm_term=%E6%9C%80%E5%B0%8F%E7%94%9F%E6%88%90%E6%A0%91kruskal%E7%AE%97%E6%B3%95&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-125609243.142^v99^control&spm=1018.2226.3001.4187",
    },

]

// 复杂度表格描述
const tableData = [
    {
        name: 'Kruskal算法',
        time: 'O(|Elog|E|)'
    },
]
</script>

<style scoped lang="scss">
* {
    list-style: none;
}

.image {
    width: 290px;
    border-radius: 10px;
    margin-right: 10px;
}

a {
    text-decoration: none;
    /* 去除默认的下划线 */
    outline: none;
    /* 去除旧版浏览器的点击后的外虚线框 */
    color: #000;
    /* 去除默认的颜色和点击后变化的颜色 */
}

.detail {
    display: flex;
    justify-content: center;
    align-items: end;

    .detail-box {
        display: flex;
        flex-direction: column;
    }

    .text {
        margin-left: 10px;
        margin-bottom: 10px;
        cursor: default;
    }

    .use {
        width: 240px;
        height: 150px;
        border-radius: 10px;
    }
}

// 相关研究部分
.thesis {
    width: 98%;
    position: relative;
    left: 20px;
    margin-bottom: 10px;
    font-weight: normal;
    background: #F5F5F5;
    border-radius: 10px;
    transition: all 0.2s linear;

    .thesis-title {
        position: absolute;
        top: 0;
        left: 5px;
    }

    .thesis-author {
        position: absolute;
        top: 25px;
        left: 120px;
    }

    .thesis-time {
        position: absolute;
        top: 45px;
        left: 120px;
    }

    .thesis-source {
        position: absolute;
        top: 65px;
        left: 120px;
    }

    &:hover {
        cursor: pointer;
        transform: translateX(-15px);
    }
}
</style>